<template>
<!-- 公告列表 -->
<div id="notice">
	<header class="mui-bar mui-bar-nav header">
		<div class="mui-icon mui-icon-left-nav mui-pull-left" @tap="$router.go(-1)"></div>
		<h1 class="mui-title">{{routerTitle}}</h1>
	</header>
	<div class="mui-content">
		<!-- 导航列表 -->
		<ul class="mui-table-view">
			<pullRefresh @refresh="toRefresh">
				<li v-for="(item,index) in noticeList" class="mui-table-view-cell" @tap="curIndex = index;showDetail = true">
					<a class="mui-navigate-right"><span>{{item.name}}</span><br><time>{{new Date(item.time).toLocaleString('chinese',{hour12:false})}}</time></a>
				</li>
			</pullRefresh>
		</ul>
	</div>
	<div v-if="noticeList.length>0" id="detail" :style="showDetail?'right:0':'right:101%'">
		<header class="mui-bar-nav report-header box-s" id="header">
			<div @tap="showDetail=false" class="mui-icon mui-icon-left-nav mui-pull-left"></div>
			<h1 class="mui-title">公告详情</h1>
		</header>
		<article>
			<!--内容-->
			<h4>{{noticeList[curIndex].name}}</h4>
			<time>{{new Date(noticeList[curIndex].time).toLocaleString('chinese',{hour12:false})}}</time>
			<div class="cont" v-html="noticeList[curIndex].content"></div>
		</article>
	</div>
</div>
</template>

<script>
import pullRefresh from "@/components/pullRefresh"
import {allNotice} from "@/api/begin"
export default{
	name: 'notice',
	components:{
		  pullRefresh
	},
	data(){
		return{
			showDetail:false,
			noticeList:[],
			curIndex:0
		}
	},
	mounted(){
		//初始化
		this.mountedInit()
	},
	methods:{
		mountedInit(calback){
			mui.showLoading();
			allNotice().then(res=>{
				if(res instanceof Array){
					this.noticeList = res;
				}else{
					mui.toast("暂无公告")
				}
				mui.hideLoading()
				calback && calback()
			})
		},
		toRefresh(callback){
			//这里进行重新加载数据操作
			this.mountedInit(()=>{
				callback()
			})
		}
	}
}
</script>

<style scoped>
.mui-content{
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
}
.mui-table-view-cell:after,.mui-table-view:after,.mui-table-view:before{display:none}
.mui-table-view-cell{padding:15px 20px;background:#ff9934;margin-bottom:10px;border-radius:10px}
.mui-table-view-cell>a{color:#fff!important;text-align: left;}
.mui-navigate-right:after,.mui-push-left:after,.mui-push-right:after{font-size:22px;color:#fff}
#detail{position:fixed;top:0;right:101%;width:100%;height:100%;background:#fff;transition:.4s all;z-index:999;overflow-y: scroll;}
#detail>header{
	height:44px;
	border-bottom:0;
	background: #ff9934;
	z-index: 10;
	height: 44px;
	padding-right: 10px;
	padding-left: 10px;
}
#detail>header>.mui-icon{
	color: #fff!important;
	margin-right: -10px;
	margin-left: -10px;
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}
#detail>header>.mui-title{
	right: 40px;
	left: 40px;
	display: inline-block;
	overflow: hidden;
	width: auto;
	margin: 0;
	text-overflow: ellipsis;
}
#detail article{padding:20px;line-height:1.5;text-align: left;}
#detail article h4{font-weight:400;font-size:20px;line-height:1.3}
#detail article time{color:#666}
#detail article .cont{margin-top:30px;color:#666!important}
.mui-navigate-right:after, .mui-push-right:after {
    right: 10px;
}
.mui-navigate-right>span{
	font-weight: bold;
}
.mui-navigate-right>time{
	font-size: smaller;
}
</style>
